import React, { lazy } from "react";
import { Navigate, Outlet, generatePath, useLocation, useParams } from "react-router-dom";
/**
 * @name umi 的路由配置
 * @description 只支持 path,component,routes,redirect,wrappers,name,icon 的配置
 * @param path  path 只支持两种占位符配置，第一种是动态参数 :id 的形式，第二种是 * 通配符，通配符只能出现路由字符串的最后。
 * @param component 配置 location 和 path 匹配后用于渲染的 React 组件路径。可以是绝对路径，也可以是相对路径，如果是相对路径，会从 src/pages 开始找起。
 * @param routes 配置子路由，通常在需要为多个路径增加 layout 组件时使用。
 * @param redirect 配置路由跳转
 * @param wrappers 配置路由组件的包装组件，通过包装组件可以为当前的路由组件组合进更多的功能。 比如，可以用于路由级别的权限校验
 * @param name 配置路由的标题，默认读取国际化文件 menu.ts 中 menu.xxxx 的值，如配置 name 为 login，则读取 menu.ts 中 menu.login 的取值作为标题
 * @param icon 配置路由的图标，取值参考 https://ant.design/components/icon-cn， 注意去除风格后缀和大小写，如想要配置图标为 <StepBackwardOutlined /> 则取值应为 stepBackward 或 StepBackward，如想要配置图标为 <UserOutlined /> 则取值应为 user 或者 User
 * @doc https://umijs.org/docs/guides/routes
 */
export default [
  {
    path: "/user",
    layout: false,
    routes: [
      {
        name: "login",
        path: "/user/login",
        component: "./User/Login",
      },
    ],
  },
  {
    path: "/welcome",
    name: "welcome",
    icon: "smile",
    component: "./Welcome",
  },
  {
    path: "/admin",
    name: "admin",
    icon: "crown",
    access: "canAdmin",
    routes: [
      {
        path: "/admin",
        redirect: "/admin/sub-page",
      },
      {
        path: "/admin/sub-page",
        name: "sub-page",
        component: "./Admin",
      },
    ],
  },
  {
    name: "list.table-list",
    icon: "table",
    path: "/list",
    component: "./TableList",
  },
  {
    path: "/",
    redirect: "/welcome",
  },
  {
    path: "*",
    layout: false,
    component: "./404",
  },
];

//import type { MenuDataItem } from "@ant-design/pro-layout";
//import type { RouteObject } from "react-router-dom";
//export type RoutesType = (MenuDataItem & RouteObject)[];

//let ComponentKeys: string[] = [];
//let ComponentMemo: Record<string, any> = {};
//export const traverseRoutes = (routes?: RoutesType, clearCache = false): RoutesType => {
//  if (clearCache === true) {
//    ComponentMemo = {};
//    ComponentKeys = [];
//  }

//  //return routes?.map((route) => {
//  //  const { redirect } = route;
//  //  let { element, component } = route;

//  //  if (typeof component === "string") {
//  //    // remove ./ or ../
//  //    const name = component.replace(/^\.\.?\//, "");

//  //    if (clearCache === true || !ComponentKeys.length) {
//  //      ComponentMemo = import.meta.glob("$ROOT/**/*.tsx");
//  //      ComponentKeys = Object.keys(ComponentMemo);
//  //    }

//  //    const componentPath = ComponentKeys.find((value) => {
//  //      return [
//  //        `$ROOT/${name}.tsx`,
//  //        `$ROOT/${name}.jsx`,
//  //        `$ROOT/${name}/index.tsx`,
//  //        `$ROOT/${name}/index.jsx`,
//  //      ].includes(value);
//  //    });

//  //    if (componentPath && Reflect.has(ComponentMemo, componentPath))
//  //      component = lazy(ComponentMemo[componentPath]);
//  //  }

//  //  if (redirect !== undefined) element = <Navigate replace to={redirect}></Navigate>;

//  //  return {
//  //    ...route,
//  //    component,
//  //    element,
//  //    children: traverseRoutes(route.children),
//  //  };
//  //}) as RoutesType;
//};

//export const traverseRoutesReplaceIcon = (routes?: RoutesType): RoutesType => {
//  return routes?.map((route) => {
//    let { icon } = route;

//    //if (typeof icon === "string") {
//    //  const iconName = (icon as string).slice(0, 1).toUpperCase() + (icon as string).slice(1);
//    //  const IconComponent = lazy(() => import(`@ant-design/icons/es/icons/${iconName}Outlined`));
//    //  icon = <IconComponent />;
//    //}

//    return {
//      ...route,
//      icon,
//      children: traverseRoutes(route.children),
//    };
//  }) as RoutesType;
//};

//const pages = import.meta.glob("/src/pages/**/*.tsx");

//console.log(pages);

export interface IRouteConventionExportProps {
  routeProps?: Record<string, any>;
}
export interface IRoute extends IRouteConventionExportProps {
  id: string;
  path?: string;
  index?: boolean;
  parentId?: string;
  redirect?: string;
}
export interface IClientRoute extends IRoute {
  element: React.ReactNode;
  children?: IClientRoute[];
  routes?: IClientRoute[];
}
export interface IRoutesById {
  [id: string]: IRoute;
}
export interface IRouteContextType {
  route: IRoute;
}
